<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
	<!--use jqeury mobile's css and js -->
	<meta name="viewport" content="width=divice-width,initial-scale=1">
	<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css">
	<link rel="stylesheet" href="css/jquery.mobile.structure-1.0.1.min.css">
	
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.mobile-1.1.1.min.js"></script>
	
	<style>
		.box{
			width:30em;
			height:30em;
			background-color:#8080c0;
			overflow:scroll;
			display:none;
			border:10em,10em,10em,10em;
			border-color:#ffff80;
		}
		.theBox{
			padding:5em;
		}
		#input{
			width:10em;
			height:10em;
		}
	</style>
	
  </head>
  
  <body ontouchstart>
    <div data-role="page">

		<div class="theBox" data-role="content">	
		 	<div class="box">
		 		<input id="input1" placeholder="你的心情" value="" type="text">
		 	</div>
			
			<a class="button" data-role="button" data-transition="fade" href="#" onclick="showBox();">click the flower1</a>
			<a class="button" data-role="button" data-transition="fade" href="#" onclick="showBox();">click the flower2</a>
		</div><!-- /content -->
	</div><!-- /page -->
	
	<script>
		function showBox(){
			$(".button").click(function(event){
     			$(".box").show();
    			event.stopPropagation();//stop the box get out
			});
			$("body").click(function(){
     			$(".box").hide();
			})
			$('.box').click(function(){
     			return false;
			});
		}
	</script>
  </body>
</html>
